<script setup>
import { ref,onMounted } from 'vue'
import { ElButton, ElCarousel, ElCarouselItem,ElMessage } from 'element-plus'
import { useUserStore } from '@/stores/user'
import { Edit } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { getAllList } from '@/api/user.js'



// 定义一个响应式的变量来存储按钮的类型
const buttonType = ref('')

//定义轮播图图片地址数组
import png1 from '@/assets/png_1.jpg';
import png2 from '@/assets/png_2.jpg';
import png3 from '@/assets/png_3.jpg';
import png4 from '@/assets/png_4.jpg';
import { Loading } from 'element-plus/es/components/loading/src/service'

const images = ref([png1, png2, png3, png4]);

const userStore = useUserStore()
// 使用 store 中的数据
const userId = userStore.userId
const userName = userStore.userName
const status = userStore.status

// console.log('userId:', userId);
// console.log('username:', userName);
// console.log('status:', status);


//将登录按钮绑定到登录页面
const router=useRouter()
const goLogin=()=>{
  router.push("/login");
  ElMessage.success("欢迎使用校园运动会管理系统")
}


//定义跳转页面事件
const gotoJoin=()=>{
  router.push('/user/join')
}

const gotoGame=()=>{
  // router.push('/user/Mymatch')
  window.open(`/user/Mymatch?userId=${userId}`,'_blank');
  console.log(userId)
}

const gotoInfo = () => {
  window.open(`/user/userInfo?userId=${userId}`, '_blank');
};

const gotoScore=()=>{
  window.open(`/match/refereeScoring?userId=${userId}`,'_blank')
}

//获取赛事
//接收数据
const teamList = ref([])
const gerenList = ref([])

const list = async () => {
  Loading.vaule = true
  try{
    const resp = await getAllList()
    // console.log(resp)
    teamList.value = resp.data.teamList
    gerenList.value = resp.data.gerenList
    // console.log(teamList.value)
    // console.log(gerenList.value)
  } catch (error){
    ElMessage.error('获取数据失败')
  }
}

const formatDate = (dateString) => {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
};

//个人报名
const gotoGeren = (item) => {
  // 将 item 保存到 localStorage
  localStorage.setItem('selectedItem', JSON.stringify(item));
  router.push({ path: '/match/geren' });
};

//团队赛报名
const gotoTeam = (item) => {
  // 将 item 保存到 localStorage
  localStorage.setItem('selectedItem', JSON.stringify(item));
  router.push({ path: '/match/team' });
};

onMounted(() => {
  list()
});

</script>
<template>
    <!-- 头部区域 -->
    <div class="header">
  <img src="@/assets/tubiao.png" alt="" class="header-logo">
  
  <div class="header-menu">
    <el-button round text >赛事公布</el-button>
    <el-button round text @click="gotoJoin">申请报名</el-button>
    <el-button round text @click="gotoGame">我的比赛</el-button>
    <el-button round text @click="gotoScore">比赛评分</el-button>
    <el-button round text @click="gotoInfo">个人信息</el-button>
  </div>
  
  <div class="header-avatar">
    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
    <div>{{ userName }} <span v-if="userName">欢迎你😀</span></div>
    <el-button type="warning" round @click="goLogin" v-if="!userName">登录</el-button>
  </div>
</div>


    <!-- 轮播图和文字资讯显示 -->
    <div class="center">

        <!-- 轮播图 -->
        <div style="margin-left: 10px; margin-right: 10px;">
            <el-carousel height="450px">
                <el-carousel-item v-for="(imgSrc, index) in images" :key="index">
                    <img class="image" :src="imgSrc" alt="轮播图" />
                </el-carousel-item>
            </el-carousel>
        </div>

        <!-- 个人赛 -->
        <div style="height: 40px;text-align: center;background-color: #9ac7f7;color: white;width: 100%;margin-top: 10px">
          <span>个人赛</span>
        </div>
      
        <!-- 个人赛具体项目展示 -->
        <div style="margin-top: 10px; min-height: 210px; display: flex; gap: 20px; flex-wrap: wrap; justify-content: center;">
          <div v-for="(item, index) in gerenList" :key="index">
            <el-card :style="{ height: '230px', width: '500px' }" class="dynamic-color-card">
              <el-descriptions title="赛事信息" style="display: flex; flex-direction: column; height: 100%;">
                <el-descriptions-item label="比赛项目:">{{ item.name }}</el-descriptions-item>
                <el-descriptions-item label="比赛地点:">{{ item.place }}</el-descriptions-item>
                <el-descriptions-item label="男子/女子:">{{ item.gtype == 0 ? '女子' : '男子' }}</el-descriptions-item>
                <el-descriptions-item label="报名时间:">
                  {{ formatDate(item.startTime) }} -- {{ formatDate(item.endTime) }}
                </el-descriptions-item>
              </el-descriptions>
              <!-- 状态单独一行 -->
              <div style="margin-top: 10px; text-align: left;">
                <span :style="{ color: item.status === 0 ? 'gray' : item.status === 1 ? 'green' : 'red' ,fontWeight: 'bold'}">
                  报名{{ item.status === 0 ? '未开始' : item.status === 1 ? '进行中' : '已结束' }}
                </span>
              </div>
              <!-- "去报名" 按钮 -->
              <div style="text-align: center; margin-top: 10px;">
                <el-button type="danger" @click="gotoGeren(item)">去报名</el-button>
              </div>
            </el-card>
          </div>
        </div>
      
        <!-- 团体赛 -->
        <div style="height: 40px;text-align: center;background-color: #9ac7f7;color: white;width: 100%;margin-top: 10px">
          <span>团体赛</span>
        </div>
      
        <!-- 团体赛具体项目展示 -->
        <div style="margin-top: 10px;min-height:210px;display: flex;gap: 20px;flex-wrap: wrap;justify-content: center;">
          <div v-for="(item, index) in teamList" :key="index">
            <el-card :style="{ height: '230px', width: '500px' }" class="dynamic-color-card">
              <el-descriptions title="赛事信息">
                <el-descriptions-item label="比赛项目:">{{ item.name }}</el-descriptions-item>
                <el-descriptions-item label="比赛地点:">{{ item.place }}</el-descriptions-item>
                <el-descriptions-item label="男子/女子:">{{ item.gtype == 0 ? '女子' : '男子' }}</el-descriptions-item>
                <el-descriptions-item label="报名时间:">
                  {{ formatDate(item.startTime) }} -- {{ formatDate(item.endTime) }}
                </el-descriptions-item>
              </el-descriptions>
              <div style="margin-top: 10px; text-align: left;">
                <span :style="{ color: item.status === 0 ? 'gray' : item.status === 1 ? 'green' : 'red' ,fontWeight: 'bold'}">
                  报名{{ item.status === 0 ? '未开始' : item.status === 1 ? '进行中' : '已结束' }}
                </span>
              </div>
              <!-- "去报名" 按钮 -->
              <div style="text-align: center; margin-top: 10px;">
                <el-button type="danger" @click="gotoTeam(item)">去报名</el-button>
              </div>
            </el-card>
          </div>
        </div>
<!--      比赛榜单-->
</div>
    <!-- 尾部 -->
    <div style="height: 100px; background-color: cornflowerblue;max-width: 100%;color: white;
    display: flex; justify-content: center; align-items: center;">
        <p>本项目为团队项目，受版权保护</p>
    </div>
</template>

<style lang="scss" scoped>
.deng {
    display: flex;
    justify-content: space-between;
}

/* 轮播图 */

.image {
  width: 100%; /* 宽度填充容器 */
  height: 100%; /* 高度填充容器 */
  object-fit: cover; /* 图片覆盖容器，保持宽高比 */
}

.carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 文字资讯 */
.word {
    display: flex;
    gap: 10px;
    /* justify-content: space-between; */
}


/* 动态颜色样式 */
@keyframes colorChange {
  0% {
    background-color: hsl(0, 70%, 80%);
  }
  25% {
    background-color: hsl(90, 70%, 80%);
  }
  50% {
    background-color: hsl(180, 70%, 80%);
  }
  75% {
    background-color: hsl(270, 70%, 80%);
  }
  100% {
    background-color: hsl(360, 70%, 80%);
  }
}

.dynamic-color-card {
  animation: colorChange 10s infinite;
  color: black; /* 字体颜色保持黑色，确保对比度 */
  transition: transform 0.3s ease; /* 添加平滑过渡效果 */

  /* 鼠标悬停时放大 */
  &:hover {
    transform: scale(1.10); /* 放大5% */
  }
}

/* 头部区域 */
.header {
  height: 130px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  background-color: cornflowerblue;
  padding: 10px;
  width: 100%;
}

.header-logo {
  flex-grow: 1;
  max-width: 200px; /* 控制 logo 的最大宽度 */
}

.header-menu {
  flex-grow: 2;
  display: flex;
  justify-content: center;
}

.header-menu el-button {
  margin: 0 10px; /* 按钮之间的间距 */
}

.header-avatar {
  flex-grow: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.header-avatar el-avatar {
  margin-right: 10px; /* 头像和文本的间距 */
}

/* 适配不同屏幕尺寸 */
@media screen and (max-width: 768px) {
  .header {
    flex-direction: column;
    align-items: center;
  }
  .header-logo,
  .header-menu,
  .header-avatar {
    flex-grow: 1;
    margin-bottom: 10px;
  }
}

</style>